<template>
  <div>
    <!-- 商品分类 -->
    <!-- <div class="variety" v-if="this.$store.state.shop.length>0 && ischecked=='classification'"> -->
    <div class="variety" v-if="ischecked=='classification'">
      <div class="card" v-for='(item,index) of this.$store.state.shop' :key='index'>
        <!-- 用字符串拼接:src="'http://127.0.0.1:3000/'+item.img" 获取存在服务器端的图片 -->
        <img :src="'http://127.0.0.1:3000/'+item.img">
        <h4>{{item.name}}</h4>
        <p>￥<span>{{item.prices}}</span></p>
        <button type="button" @click="addToCar" v-bind:data-num='index++'>加入购物车</button>
        <p>在售：{{item.sole}}</p>
      </div>
    </div>
    <!-- <span v-else-if="ischecked=='classification'">后台数据还没弄。。。</span> -->
    <!-- 库存 -->
    <div class="variety" v-else-if="ischecked=='inventory'">
      <div class="card" v-for='(item,index) of this.$store.state.inventory' :key='index'>
        <!-- 用字符串拼接:src="'http://127.0.0.1:3000/'+item.img" 获取存在服务器端的图片 -->
        <img :src="'http://127.0.0.1:3000/'+item.img">
        <h4>{{item.name}}</h4>
        <p>￥<span>{{item.prices}}</span></p>
        <button type="button" @click="putAway" :disabled="item.soleNum>=item.count"
          v-bind:data-num='index++'>上架出售</button>
        <p>上架数量：{{item.soleNum}}</p>
        <p>库存：{{item.count}}</p>
      </div>
    </div>
    <!-- 在售 -->
    <div class="variety" v-else-if="ischecked=='soleing'">
      <div class="card" v-for='(item,index) of this.$store.state.soleing' :key='index'>
        <!-- 用字符串拼接:src="'http://127.0.0.1:3000/'+item.img" 获取存在服务器端的图片 -->
        <img :src="'http://127.0.0.1:3000/'+item.img">
        <h4>{{item.name}}</h4>
        <p>￥<span>{{item.prices}}</span></p>
        <button type="button" @click="putAway" v-bind:data-num='index++'>商品下架</button>
        <p>上架数量：{{item.count}}</p>

      </div>
    </div>
  </div>
</template>
<script>
  import {
    Toast
  } from 'mint-ui';
  export default {
    props: {
      ischecked: {
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      addToCar(e) {
        //用来对在售 库存 和购物车进行增删改
        let num = e.currentTarget.dataset.num
        let path = ''
        let uid = parseInt(this.$store.state.uid)
        let obj = {}
        // 判断现在哪个组件
        if (this.ischecked == 'classification') {
          path = 'addcar'
          obj = {
            uid: uid,
            lid: this.$store.state.shop[num].nid,
            price: this.$store.state.shop[num].prices,
            lname: this.$store.state.shop[num].name,
            limg: this.$store.state.shop[num].img,
            n: 1
          }
        } else if (this.ischecked == 'inventory') {
          // 在仓库就让上架数量加一
          path = 'updataInventory'
          obj = {
            uid: uid,
            lid: this.$store.state.inventory[num].lid,
            soleNum: this.$store.state.inventory[num].soleNum,
            n: 1
          }
        } else if (this.ischecked == 'soleing') {
          // 在在售组件就让上架数量加减一
          path = 'updataInventory'
          obj = {
            uid: uid,
            lid: this.$store.state.soleing[num].lid,
            soleNum: this.$store.state.soleing[num].count,
            n: -1
          }

        }
        this.axios(path, {
          params: obj
        }).then(result => {
          console.log(result)
        })
      },
      putAway(e) {
        let num = e.currentTarget.dataset.num
        let uid = this.$store.state.uid
        let obj = {}
        if (this.ischecked == 'soleing' && this.$store.state.soleing[num].count == 1) {
          // 如果下架时数量只有1 那就删除soleing的数据
          this.axios.get('delSole', {
            params: {
              uid: uid,
              lid: this.$store.state.soleing[num].lid
            }
          }).then(result => {
            if (result.data.code == 1) {
              Toast('操作成功');
              this.$router.go(0)
            } else {
              console.log(result)
              Toast('操作失败');
            }
          })
          this.addToCar(event)
          return
        }
        //看在什么组件 就发送什么数据更改的请求
        if (this.ischecked == 'inventory') {
          obj = {
            uid,
            lid: this.$store.state.inventory[num].lid,
            prices: this.$store.state.inventory[num].prices,
            name: this.$store.state.inventory[num].name,
            img: this.$store.state.inventory[num].img,
            sole: this.$store.state.inventory[num].sole,
            count: this.$store.state.inventory[num].count,
            soleNum: this.$store.state.inventory[num].soleNum,
            n: 1,
            kind: this.$store.state.inventory[num].kind,
            kindName: this.$store.state.inventory[num].kindName
          }
        } else {
          obj = {
            uid,
            lid: this.$store.state.soleing[num].lid,
            prices: this.$store.state.soleing[num].prices,
            name: this.$store.state.soleing[num].name,
            img: this.$store.state.soleing[num].img,
            sole: this.$store.state.soleing[num].sole,
            n: -1,
            kind: this.$store.state.soleing[num].kind,
            kindName: this.$store.state.soleing[num].kindName
          }
        }
        this.addToCar(event)
        this.axios('putaway', {
          params: obj
        }).then(result => {
          if (result.data.code == 1) {
            Toast('操作成功');
            this.$router.go(0)
          } else {
            console.log(result)
            Toast('操作失败');
          }
        })
      }
    },

  }
</script>

<style scoped>
  .variety {
    width: 100%;
    height: 42rem;
  }

  .variety {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    justify-content: left;
  }

  .variety .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 14rem;
    height: 20rem;
    padding: 0.4rem;
    margin: 0.5rem;
    text-align: center;
    border: 0.0625rem solid #281A34;
    border-radius: 0.625rem;
  }

  .variety .card img {
    width: 13rem;
    height: 7.8125rem;
    border-radius: 0.625rem;
  }

  .variety .card h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .variety .card p span {
    color: red;
    font-weight: bold;
  }

  .variety .card p:last-child {
    margin: 0;
    font-size: x-small;
    color: #8d868d;
  }
</style>
